<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="提交审核"/>
    </el-steps>

    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="courseVo.title" placeholder="参照:一节课带你全盘掌握分布式事务解决方案"/>
      </el-form-item>
      <!-- 所属分类 TODO -->
      <!-- 课程讲师 TODO -->
      <!--      <el-form-item label="授课讲师">-->

      <!--        <el-select v-model="courseVo.region" placeholder="请选择授课讲师">-->
      <!--          <el-option label="Zone one" value="shanghai" />-->
      <!--          <el-option label="Zone two" value="beijing" />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="课程分类">-->
      <!--        <el-select v-model="courseVo.region" placeholder="请选择课程分类">-->
      <!--          <el-option label="Zone one" value="shanghai" />-->
      <!--          <el-option label="Zone two" value="beijing" />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->


      <!-- 授课讲师 -->
      <el-form-item label="授课讲师">
        <el-select v-model="selectedTeacher" placeholder="请选择授课讲师">
          <el-option
            v-for="teacher in teachers"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"
          />
        </el-select>
      </el-form-item>

      <!-- 课程分类 -->
      <el-form-item label="课程分类">
        <el-select v-model="selectedCategory" placeholder="请选择课程分类">
          <el-option
            v-for="category in categories"
            :key="category.id"
            :label="category.title"
            :value="category.id"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="总课时">
        <el-input-number
          :min="0"
          v-model="courseVo.lessonNum"
          controls-position="right"
          placeholder="请填写课程的总课时数"/>
      </el-form-item>
      <!-- 课程简介 TODO -->
      <el-form-item label="课程简介">
        <editor v-model="courseVo.description" :min-height="192"/>
      </el-form-item>
      <el-form-item label="封面">
        <ImageUpload placeholder="上传封面" ref="imageUpload" :limit="1"/>
      </el-form-item>
      <el-form-item label="课程价格">
        <el-input-number
          :min="0"
          v-model="courseVo.price"
          controls-position="right"
          placeholder="免费课程请设置为0元"/>
        元
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="addCourseAndNext">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {addCourse, getCourseVO, updateCourse} from "@/api/course/course";
import {listSubject} from "@/api/course/subject";
import {listTrainer} from "@/api/course/trainer";


import axios from "axios";
import {listTrainerAll} from "../../../api/course/trainer";

export default {
  data() {
    return {
      courseVo: {},
      saveBtnDisabled: false,
      teachers: [],      // 讲师列表
      categories: [],    // 课程分类列表
      selectedTeacher: "", // 选中的讲师
      selectedCategory: "" // 选中的分类
    }
  },


  methods: {
    addCourseAndNext() {
      // 将上传的图片赋值给form数据模型中的cover属性
      if (this.$refs.imageUpload.fileList[0] == undefined) {
        this.$modal.msgWarning("请上传封面");
        return
      }
      this.courseVo.cover = this.$refs.imageUpload.fileList[0].url;
      // 判断是新增操作还是修改操作
      if(this.courseVo.id == undefined){
        addCourse(this.courseVo).then(response => {
          this.$modal.msgSuccess("保存课程信息成功，跳转到编辑章节页面");
          // 跳转页面 response.data 就是课程的ID
          this.$router.push({path: `/course/course/chapter/`, query: {id: response.data}});
        });
      }else{
        // 修改课程的信息
        updateCourse(this.courseVo).then(response => {
          this.$modal.msgSuccess("修改课程信息成功，跳转到编辑章节页面");
          // 跳转页面 response.data 就是课程的ID
          this.$router.push({path: `/course/course/chapter/`, query: {id: response.data}});
        });
      }
    },
    fetchTeachers() {
      listTrainerAll().then(response => {
        this.teachers = response.data;
      })
      // try {
      //   const response = axios.get("/trainer/listTrainer");
      //   this.teachers = response.data;
      // } catch (error) {
      //   console.error("获取授课讲师失败:", error);
      // }
    },
    fetchCategories() {
      listSubject().then(response => {
        this.categories = response.data;
      })
    }
  },
  created() {
    // 需要获取路由中的id参数的值，如果路由中有这个id，说明是从章节页面跳转过来的
    if (this.$route.query.id != undefined) {
      // 发送请求查询课程相关的数据，并把数据赋值给courseVo
      getCourseVO(this.$route.query.id).then(response => {
        this.$refs.imageUpload.fileList.push({url: response.data.cover});
        this.courseVo = response.data;
      });
    }
  },
  mounted() {
    this.fetchTeachers();
    this.fetchCategories();
  }
}
</script>
